import React, {useState, useEffect, useMemo} from 'react';

import DetailCard from '~/page/FineBi/common/DetailCard';
import DetailModal from '~/page/FineBi/common/DetailModal';
import Loading from '~/page/FineBi/common/Loading';

import {parseDimensionAndValues} from '~/page/FineBi/utils/convert';
import {queryValues, queryDetail, download} from '~/service/refundReport';

const withPannel = Element => props => {
    // 数据格式有问题需要传过来unitId, 否则没法取，需要unitId来获取unitId obj
    const {dimensionAndValues = [], dId, unitId} = props;

    const [loading, setLoading] = useState(false);
    const [modalVisible, setModalVisible] = useState(false);
    const [title, setTitle] = useState();

    // 下钻
    const [drilingList, setDrilingList] = useState([]);

    // 详情数据
    const [detailData, setDetailData] = useState({});

    const [dataSource, setDataSource] = useState();

    const pDimensionAndValues = useMemo(() => parseDimensionAndValues(dimensionAndValues, dId), [
        dimensionAndValues,
        dId
    ]);

    // 获取本块数据value
    const getData = (pDimensionAndValues, drilingList) => {
        const dashBoard = [
            {
                dashBoardName: dId,
                dashBoardId: dId
            }
        ];
        const param = {
            dimensionAndValues: pDimensionAndValues,
            dashBoardList: dashBoard,
            drilingList
        };
        setLoading(true);
        queryValues(param)
            .then(res => {
                const cardDetail = res?.data[dId] ?? null;
                if (cardDetail) {
                    const {unitName, chart, config} = cardDetail[`${unitId}`];
                    setTitle(unitName);
                    setDataSource({
                        chart,
                        config
                    });
                }
            })
            .finally(() => {
                setLoading(false);
            });
    };

    const handleDownload = () => {
        const params = {
            unitId,
            drilingList,
            dimensionAndValues: pDimensionAndValues
        };
        const excelName = title ? title : null;
        download(params, excelName);
    };

    const handleDetail = () => {
        setModalVisible(true);
        const params = {
            unitId,
            drilingList,
            dimensionAndValues: pDimensionAndValues
        };
        queryDetail(params).then(res => {
            const {data} = res;
            setDetailData(data);
        });
    };

    // 下钻
    const handleDrilling = params => {
        const {info} = params;
        const {config = {}} = dataSource;
        const {dimensionList = []} = config;
        const [firstDimension] = dimensionList;
        const {dimensionId = '', dimensionName = ''} = firstDimension || {};
        const driling = {
            unitId,
            unitName: title,
            value: info?.name,
            dimensionId,
            dimensionName
        };
        setDrilingList([driling]);
    };

    const handleBack = () => {
        setDrilingList([]);
    };

    useEffect(() => {
        if (pDimensionAndValues && drilingList) {
            getData(pDimensionAndValues, drilingList);
        }
    }, [pDimensionAndValues, drilingList]);

    return (
        <div>
            <DetailCard
                style={{height: '100%'}}
                title={title}
                onDownload={handleDownload}
                onDetail={handleDetail}
                onBack={handleBack}
                showBack={drilingList?.length !== 0}
            >
                <Loading loading={loading}>
                    <Element {...props} dataSource={dataSource} onDrilling={handleDrilling} />
                </Loading>
            </DetailCard>
            <DetailModal data={detailData} detailModalVisible={modalVisible} onCancel={() => setModalVisible(false)} />
        </div>
    );
};

export default withPannel;
